<template>
  <div class="h5-poster-container">
    <phone-h5 :pageConf="pageConf">
      <template>
        <div class="h5-content" id="postHtml" ref="postHtml" :style="{
          'background-color':  pageConf.background
        }">
          <form-item-layout
            v-for="(item) in drawingList"
            :item="item"
            :active-id="activeId"
            :key="item.id">
          </form-item-layout>
          <div class="user-share-container">
            <div class="share-title">
              {{activeInfo.activityName}}
            </div>
            <div class="share-content flex-between" v-if="linkProp['url']">
              <vue-qr :size="115" :text="linkProp['url']" />
            </div>
          </div>
        </div>
      </template>
    </phone-h5>
  </div>
</template>

<script>
  import {appModelList} from '@/formgen/components/FormConfig/config.js'
  import html2canvas from "html2canvas";
  import axios from 'axios'
  import VueQr from 'vue-qr'
  import { mapActions, mapGetters } from 'vuex';
  import { getToken } from "@/utils/auth";
  import { dataURLtoBlob, blobToFile } from '@/utils/tools'
  import {
    getH5Link
  } from "@/api/activeManage/active";
  export default {
    props: {
      activeId: String | Number
    },
    components: {
      VueQr,
      'form-item-layout': () => import('@/formgen/layout/formItemLayout.vue'),
      'phone-h5': () => import('@/formgen/layout/phone.vue'),
    },
    data(){
      return{
        drawingList: [],
        pageConf: {},
        activeInfo: {},
        linkProp: {}
      }
    },
    computed: {
      ...mapGetters(['vuex_drawingH5'])
    },
    mounted(){
      this.setconfig()
      this.setActivity(this.activeId).then(res => {
        this.activeInfo = res
        this.getAppH5Link(res.id)
      })
    },
    methods:{
      ...mapActions(['setActivity', 'setH5Config']),
      getAppH5Link(id){
        getH5Link(id).then(res => {
          this.linkProp = res.data
        })
      },      
      setconfig(){
        let activityTypeId = 2
        this.pageConf = this.vuex_drawingH5
        this.setH5Config(this.pageConf)
        this.drawingList = this.vuex_drawingH5.draw.filter(item => {
          let {ignore} = item.config
          // if((ignore || []).includes(`${activityTypeId}`)) return false
          return item.isPoster
        })
      },
      /** 将html元素转换成海报图片 */
      createPoster() {
        return new Promise((resolve, reject) => {
          const name = this.activeInfo.activityName;
          const posterHtml = this.$refs.postHtml;
          // 生成海报
          let {clientHeight, clientWidth} = posterHtml
          const domObj = posterHtml;
          html2canvas(domObj, {
            useCORS: true,
            allowTaint: true,
            scale: 2,
            width: clientWidth,
            height: clientHeight,
            scrollY: -18,
            scrollX: -0,
            onclone(doc) {}
          }).then(canvas => {
            this.downloadQRImg(canvas, name).then(res => {
              resolve(res)
            })
          });
        })        
      },
      /** 根据URL下载图片 */
      downloadQRImg(canvas, name) {
        return new Promise((resolve, reject) => {
          /** 新Image对象，可以理解为DOM */
          let image = new Image();
          /** 解决跨域 Canvas 污染问题 */
          image.setAttribute("crossOrigin", "anonymous");
          let imgUrl = canvas.toDataURL("image/jpeg");
          this.imgUrl = imgUrl
          image.src = imgUrl;
          const blob = dataURLtoBlob(imgUrl);
          const file = blobToFile(blob, `${name}.jpeg`);
          const formData = new FormData();
          formData.append("file", file);
          let headers = {
            Authorization: getToken(),
          }
          axios({
            method: 'post',
            url: process.env.VUE_APP_BASE_API + "/common/uploadOss",
            data: formData,
            headers: headers
          }).then(res => {
            resolve(res.data)
          }).catch(() => {
            reject('图片上传错误')
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .user-share-container{
  padding: 30px 20px;
  background-color: #fff;
  .share-title{
    text-align: center;
    color: #3D3D3D;
    font-size: 13px;
    font-weight: 500;
  }
  .share-content{
    padding: 30px 100px 0;
  }
}
.h5-poster-container{
  height: 0;
  overflow: hidden;
}
.h5-content{
  width: vw(375);
  // width: 100%;
  min-height: vh(667);
  margin: auto;
  position: relative;
  border: 1px solid #DCDFE6;
  border-top: 0;
}

</style>

